<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <%@ include file="/common/client/header.jsp" %>
    <script src="${ctx}/statics/js/manager/manager.js"></script>
</head>
<body>
<%@ include file="/common/manager/searchBar.jsp" %>
<!--End Header End-->
<div class="i_bg bg_color">
    <!--Begin 用户中心 Begin -->
    <div class="m_content">
        <%@ include file="/common/manager/leftBar.jsp" %>
        <div class="m_right" id="content">
            <div class="mem_tit">商品列表</div>
            <br>
            <table border="0" class="order_tab" style="width:930px; text-align:center; margin-bottom:30px;"
                   cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td width="10%">商品名称</td>
                    <td width="10%">商品图片</td>
                    <td width="5%">库存</td>
                    <td width="10%">价格</td>
                    <td width="10%" colspan="2">操作</td>
                </tr>
                <%--product start--%>
                <tr>
                    <td>香奈儿</td>
                    <td>
                        <a href="${ctx}/client/goods/goodsDetail.jsp" target="_blank">
                            <img src="${ctx}/files/1A836D2B3A3348DDAB19807E6CEA8028.jpg" width="50" height="50"/>
                        </a>
                    </td>
                    <td>0</td>
                    <td>152.0</td>
                    <td><a href="${ctx}/manager/goods/toAddGoods.jsp">修改</a></td>
                    <td><a href="javascript:void(0);" onclick="">删除</a></td>
                </tr>
                <%--product end--%>
                <%--product start--%>
                <tr>
                    <td>香奈儿</td>
                    <td>
                        <a href="${ctx}/client/goods/goodsDetail.jsp" target="_blank">
                            <img src="${ctx}/files/1A836D2B3A3348DDAB19807E6CEA8028.jpg" width="50" height="50"/>
                        </a>
                    </td>
                    <td>0</td>
                    <td>152.0</td>
                    <td><a href="${ctx}/manager/goods/toAddGoods.jsp">修改</a></td>
                    <td><a href="javascript:void(0);" onclick="">删除</a></td>
                </tr>
                <%--product end--%>
                <%--product start--%>
                <tr>
                    <td>香奈儿</td>
                    <td>
                        <a href="${ctx}/client/goods/goodsDetail.jsp" target="_blank">
                            <img src="${ctx}/files/1A836D2B3A3348DDAB19807E6CEA8028.jpg" width="50" height="50"/>
                        </a>
                    </td>
                    <td>0</td>
                    <td>152.0</td>
                    <td><a href="${ctx}/manager/goods/toAddGoods.jsp">修改</a></td>
                    <td><a href="javascript:void(0);" onclick="">删除</a></td>
                </tr>
                <%--product end--%>
                <%--product start--%>
                <tr>
                    <td>香奈儿</td>
                    <td>
                        <a href="${ctx}/client/goods/goodsDetail.jsp" target="_blank">
                            <img src="${ctx}/files/1A836D2B3A3348DDAB19807E6CEA8028.jpg" width="50" height="50"/>
                        </a>
                    </td>
                    <td>0</td>
                    <td>152.0</td>
                    <td><a href="${ctx}/manager/goods/toAddGoods.jsp">修改</a></td>
                    <td><a href="javascript:void(0);" onclick="">删除</a></td>
                </tr>
                <%--product end--%>
                </tbody>
            </table>
            <%--分页--%>
            <div class="pages">
                <a href="" class="p_pre">首页</a>
                <a href="" class="p_pre">上一页</a>
                <a href="" class="p_pre">下一页</a>

                <a href="" class="p_pre">尾页</a>

            </div>
            <%--分页end--%>
        </div>
    </div>
    <%@ include file="/common/client/footer.jsp" %>
</div>
<script>
    $(document).ready(function () {
        var itemsPerPage = 5; // 每页显示的商品数量
        var currentPage = 1;

        function loadProductData(page) {
            $.ajax({
                url: "ProductServlet", // 后端Servlet的URL
                method: "GET",
                data: {page: page, itemsPerPage: itemsPerPage},
                success: function (data) {
                    renderProductList(data.products);
                    renderPagination(data.currentPage, data.totalPages);
                }
            });
        }

        function renderProductList(products) {
            var productListContainer = $("#productList");
            productListContainer.empty();

            for (var i = 0; i < products.length; i++) {
                var product = products[i];
                var productHtml = '<div class="product">' +
                    '<h2>' + product.name + '</h2>' +
                    '<p>价格: $' + product.price + '</p>' +
                    '<p>库存: ' + product.stock + '</p>' +
                    '</div>';
                productListContainer.append(productHtml);
            }
        }

        function renderPagination(currentPage, totalPages) {
            var paginationContainer = $("#pagination");
            paginationContainer.empty();

            for (var page = 1; page <= totalPages; page++) {
                var pageLink = $('<a href="javascript:void(0)" class="page-link">' + page + '</a>');
                pageLink.click(function () {
                    loadProductData($(this).text());
                });
                paginationContainer.append(pageLink);
            }
        }

        loadProductData(currentPage);
    });
</script>
</body>

</html>


